<template>
	<div>
		<div flex="main:justify">
			<div flex="cross:center">
				<p style="width: 40%;text-align: right;">单据名称</p>
				<el-input v-model="formData.name" disabled></el-input>
			</div>
			<div flex="cross:center">
				<p style="width: 40%;text-align: right;">编码规则</p>
				<el-input v-model="formData.RuleStr" disabled></el-input>
			</div>
		</div>
		<base-layout ref="orderName" :showTitle="false" :buttonList="buttonList" @onFuncBtn="onFuncBtn" :footerShow="true" >
			<div slot="main">
				<base-table ref="customtable" :border="true" :showIndex="false" :slotrow="true" @radioChange="orderRadioChange"
					:tabLoading.sync="orderTabLoading" :tableHeight="orderTableHeight" :tableData="orderTableData" 
					:tableColumn="orderTableColumn" >
					<!-- 单选 -->
					<template v-slot:option="{row}">
						<el-radio v-model="orderIndex" :label="row.$index"></el-radio>  
					</template>
					<!-- 排序 -->
					<template v-slot:sort="{row}">
						<span>{{row.$index + 1}}</span>
					</template>
					<!-- 类型 -->
					<template v-slot:type="{row}">
						 <el-select v-model="row.row.type" placeholder="请选择" clearable filterable>
						    <el-option
						      v-for="item in ruleOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value"
							  >
						    </el-option>
						  </el-select>
					</template>
					<!-- 规则 -->
					<template v-slot:formart="{row}">
						<el-input v-model="row.row.formart" clearable type="text"></el-input>
					</template>
					<!-- 长度 -->
					<template v-slot:ruleLength="{row}">
						<el-input v-model="row.row.ruleLength" clearable type="text"></el-input>
					</template>
				</base-table>
			</div>
		</base-layout>
	</div>
</template>

<script>
	import baseTable from "@/components/base/baseTable"
	import baseLayout from "@/components/base/baseLayout"
	import configData from "./configData"
	export default{
		components:{
			baseTable,
			baseLayout
		},
		props: {
			// 距离顶部距离
			radioId: {
				type: Number,
				default: '',
			},
		},
		data(){
			return{
				formData:{
					name:'',
					RuleStr:''
				},
				ruleOptions:[
					{label:'连接符号',value:0},
					{label:'字符串',value:1},
					{label:'日期',value:2},
					{label:'流水号',value:3}
				],
				orderIndex:null,
				orderTabLoading:false,
				orderTableHeight: '40vh',
				orderTableData:[],
				orderTableColumn: configData.orderTableColumn,
				buttonList: [
					{
						icon: 'el-icon-plus'
					},
					{
						icon: 'el-icon-delete',
						type:'danger'
					},
				],
			}
		},
		watch:{
			orderTableData:{
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					this.formData.RuleStr = ''
					if(newV.length > 0){
						newV.forEach(el =>{
							let formart = ''
							el.ruleLength =el.formart.length
							if(el.type == 3){
								formart = el.ruleLength?el.ruleLength+'位流水号':'null'
							}else{
								formart = el.formart?el.formart:'null'
							}
							this.formData.RuleStr = this.formData.RuleStr + formart
						})
					}
				}
			},
		},
		methods:{
			onFuncBtn(btnEven){
				if (btnEven.icon == 'el-icon-plus') {
					let arr = {
						sort:this.orderTableData.length + 1,
						type:'',
						formart:'',
						ruleLength:''
					}
					this.orderTableData.push(arr)
				}
				if (btnEven.icon == 'el-icon-delete') {
					if(this.orderIndex === null){
						this.$vmNews('请选择一条')
						return
					}
					this.orderTableData.splice(this.orderIndex,1)
				}
			},
			orderRadioChange(val) {
				this.orderIndex = val.index
			},
		}
	}
</script>

<style scoped>
	>>>.el-radio__label {
		/* display: none; */
	}
</style>